<template>
  <div id="app">
    <Form  :form="fo"   v-on:submit=""></Form>
  </div>
  
  </template>
  
  <script lang="ts" setup name="GoodsList">
   import { Form } from '@formio/vue';
  import { ref } from 'vue';
  let fo=ref({
    "display": "form",
    "components": [
        {
            "label": "Text Field",
            "labelPosition": "top",
            "placeholder": "",
            "description": "",
            "tooltip": "",
            "prefix": "",
            "suffix": "",
            "widget": {
                "type": "input"
            },
            "inputMask": "",
            "displayMask": "",
            "applyMaskOn": "change",
            "allowMultipleMasks": false,
            "customClass": "",
            "tabindex": "",
            "autocomplete": "",
            "hidden": false,
            "hideLabel": false,
            "showWordCount": false,
            "showCharCount": false,
            "mask": false,
            "autofocus": false,
            "spellcheck": true,
            "disabled": false,
            "tableView": true,
            "modalEdit": false,
            "multiple": false,
            "defaultValue": "",
            "persistent": true,
            "inputFormat": "plain",
            "protected": false,
            "dbIndex": false,
            "case": "",
            "truncateMultipleSpaces": false,
            "encrypted": false,
            "redrawOn": "",
            "clearOnHide": true,
            "customDefaultValue": "",
            "calculateValue": "",
            "calculateServer": false,
            "allowCalculateOverride": false,
            "validateOn": "change",
            "validate": {
                "required": false,
                "pattern": "",
                "customMessage": "",
                "custom": "",
                "customPrivate": false,
                "json": "",
                "minLength": "",
                "maxLength": "",
                "strictDateValidation": false,
                "multiple": false,
                "unique": false
            },
            "unique": false,
            "validateWhenHidden": false,
            "errorLabel": "",
            "errors": "",
            "key": "textField",
            "tags": [],
            "properties": {},
            "conditional": {
                "show": null,
                "when": null,
                "eq": "",
                "json": ""
            },
            "customConditional": "",
            "logic": [],
            "attributes": {},
            "overlay": {
                "style": "",
                "page": "",
                "left": "",
                "top": "",
                "width": "",
                "height": ""
            },
            "type": "textfield",
            "dataGridLabel": false,
            "input": true,
            "refreshOn": "",
            "addons": [],
            "inputType": "text",
            "id": "eco39jl"
        },
        {
            "label": "Url",
            "labelPosition": "top",
            "placeholder": "",
            "description": "",
            "tooltip": "",
            "prefix": "",
            "suffix": "",
            "widget": {
                "type": "input"
            },
            "displayMask": "",
            "applyMaskOn": "change",
            "customClass": "",
            "tabindex": "",
            "autocomplete": "",
            "hidden": false,
            "hideLabel": false,
            "mask": false,
            "autofocus": false,
            "spellcheck": true,
            "disabled": false,
            "tableView": true,
            "modalEdit": false,
            "multiple": false,
            "defaultValue": "",
            "persistent": true,
            "inputFormat": "plain",
            "protected": false,
            "dbIndex": false,
            "truncateMultipleSpaces": false,
            "encrypted": false,
            "redrawOn": "",
            "clearOnHide": true,
            "customDefaultValue": "",
            "calculateValue": "",
            "calculateServer": false,
            "allowCalculateOverride": false,
            "validateOn": "change",
            "validate": {
                "required": false,
                "pattern": "",
                "customMessage": "",
                "custom": "",
                "customPrivate": false,
                "json": "",
                "minLength": "",
                "maxLength": "",
                "strictDateValidation": false,
                "multiple": false,
                "unique": false
            },
            "unique": false,
            "validateWhenHidden": false,
            "errorLabel": "",
            "errors": "",
            "key": "url",
            "tags": [],
            "properties": {},
            "conditional": {
                "show": null,
                "when": null,
                "eq": "",
                "json": ""
            },
            "customConditional": "",
            "logic": [],
            "attributes": {},
            "overlay": {
                "style": "",
                "page": "",
                "left": "",
                "top": "",
                "width": "",
                "height": ""
            },
            "type": "url",
            "dataGridLabel": false,
            "input": true,
            "refreshOn": "",
            "showCharCount": false,
            "showWordCount": false,
            "allowMultipleMasks": false,
            "addons": [],
            "inputType": "url",
            "inputMask": "",
            "id": "eue1wd"
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "size": "md",
            "block": false,
            "action": "submit",
            "disableOnInvalid": true,
            "theme": "primary",
            "id": "erd519",
            "input": true,
            "placeholder": "",
            "prefix": "",
            "customClass": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": null,
            "protected": false,
            "unique": false,
            "persistent": false,
            "hidden": false,
            "clearOnHide": true,
            "refreshOn": "",
            "redrawOn": "",
            "tableView": false,
            "modalEdit": false,
            "dataGridLabel": true,
            "labelPosition": "top",
            "description": "",
            "errorLabel": "",
            "tooltip": "",
            "hideLabel": false,
            "tabindex": "",
            "disabled": false,
            "autofocus": false,
            "dbIndex": false,
            "customDefaultValue": "",
            "calculateValue": "",
            "calculateServer": false,
            "widget": {
                "type": "input"
            },
            "attributes": {},
            "validateOn": "change",
            "validate": {
                "required": false,
                "custom": "",
                "customPrivate": false,
                "strictDateValidation": false,
                "multiple": false,
                "unique": false
            },
            "conditional": {
                "show": null,
                "when": null,
                "eq": ""
            },
            "overlay": {
                "style": "",
                "left": "",
                "top": "",
                "width": "",
                "height": ""
            },
            "allowCalculateOverride": false,
            "encrypted": false,
            "showCharCount": false,
            "showWordCount": false,
            "properties": {},
            "allowMultipleMasks": false,
            "addons": [],
            "leftIcon": "",
            "rightIcon": ""
        }
    ]
})
/*{
      components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      placeholder: 'Enter your first name.',
      input: true
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      input: true
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary'
    }
  ]
}*/

  </script>
  <style scoped>
  @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');
  @import url('https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css');
</style>